<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" src="../static/js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="../static/js/myinit.js"></script>
<script type="text/javascript" src="../static/js/cook_shop_cart.js"></script>
<title>在线客服</title>
</head>

<body>
<div style="left:0px;right:0px;position:fixed;bottom:50px;top:0px;width:100%;background-color:#dcdcdc;overflow-y:scroll" id="chatitemlist"> </div>
<div  style="position:fixed;bottom:0px;left:0px;right:0px" id="foot">
	<div style="position:relative;height:50px;text-align:center"> <img src="../static/img/add.png" style="position: absolute; top: 10px; left: 5px;" height="auto" width="30px" id="addthermsg">
		 
			<input type="text" id="context" style="height:30px;line-height:30px;margin-top:7px;font-size:16px;" placeholder=""/>
		 
		<img src="../static/img/fasong.png" style="position: absolute; top: 10px; right: 5px;" height="auto" width="30px" id="sendit"> </div>
	<div id="other_msg"   style="padding-top:4px;padding-bottom:5px;border-top:#CCC 1px solid;display:none">
    <!--
		<div  style="text-align:center;width:25%;display:inline-block"> <img src="../static/img/tupian.png" style="width:60px"/>
			<div>图片</div>
		</div><div   style="text-align:center;width:25%;display:inline-block"> <img src="../static/img/mayidu.png" style="width:60px"/>
			<div>满意度</div>
		</div>-->
        <div id="myorders"    style="text-align:center;width:50%;display:inline-block"> <img src="../static/img/dindan.png" style="width:60px"/>
        
			<div>我的订单</div>
		</div><div id="zuijinggoods"   style="text-align:center;width:50%;display:inline-block"> <img src="../static/img/liulan.png" style="width:60px"/>
			<div>最近浏览</div>
		</div>
	</div>
</div>

<!--
<div data-role="page" id="chat" style="background-color:#dcdcdc">
 
	<div data-role="footer" data-position="fixed" id="foot">
		<div style="position:relative;height:50px;text-align:center">
		<img src="../static/img/add.png" style="position: absolute; top: 12px; left: 3px;" height="auto" width="30px" id="addthermsg">
			<div style="display:inline-block;width:80%" id="context_body">
				<input type="text" id="context" placeholder=""/>
			</div>
			
			<img src="../static/img/fasong.png" style="position: absolute; top: 12px; right: 3px;" height="auto" width="30px" id="sendit">
		</div>
		<div id="other_msg" class="ui-grid-c" style="padding-top:4px;padding-bottom:5px;border-top:#CCC 1px solid;display:none">
			<div class="ui-block-a" style="text-align:center">
				<img src="../static/img/tupian.png" style="width:60px"/>
				<div>图片</div> 
			
			</div>
			<div class="ui-block-b" style="text-align:center">
				<img src="../static/img/mayidu.png" style="width:60px"/>
				<div>满意度</div>
			
			</div>
			<div class="ui-block-c" style="text-align:center">
				<img src="../static/img/dindan.png" style="width:60px"/>
				<div>我的订单</div>
			
			</div>
			<div class="ui-block-d" style="text-align:center">
			
				<img src="../static/img/liulan.png" style="width:60px"/>
				<div>最近浏览</div>
			</div>
			
			
		</div>
	</div>
</div>
-->
<div style="position:fixed;top:0px;left:0px;bottom:0px;height:100%;width:100%;background-color:white;z-index:10000;display:none" id="mydialog">
	<div style="display:inline-block;float:right;margin-right:10px;margin-top:10px;" id="dialog_colse"><img src="../static/img/cha.png" width="50" height="auto"/></div>
	<div style="clear:both"></div>
	<div id="dialog_list" style="overflow-y:scroll"> </div>
</div>
<script type="text/javascript">


	var openid = getUrldata('OPENID');
	
	ajaxSettingsasync(false);
	
	//$.cookie(this.cookiename);
	//$.cookie(this.cookiename, source);
	//个人微信头像
	var headimg =$.cookie('headimg');
	//拉取 原来的聊天的kfid
	var kfid = $.cookie('kfid');
	var kfimg= $.cookie('kfimg');

	
	//最大聊天的msgid  
	var maxmsgid=0;
	
	if(kfid==''||kfid==undefined||kfid=='undefined'){
		kfid=-1;
	}
	//在线客服列表
	function getkefulist(){
		var url = '/webserver/api/v1/servicer/?format=json&status=1';
		$.getJSON(url,function(rs){
			var kefus=rs.objects;
			if(kefus.length<1){
				
				toast('当前没有客服在线');
				kfid=-1;
				return ;
			}
			var chooseid=-1;
			if(kfid!=-1){
				$.each(kefus,function(index,item){
					if(item.id==kfid){
						chooseid=kfid;
						kfimg=item.headimg;
					}
			
				});
				
			}
			
			if(chooseid==-1){
				var aa=parseInt(Math.floor(Math.random()*kefus.length));
				chooseid=kefus[aa].id;
				kfimg=kefus[aa].headimg;
			
			}
			//存下聊天客服
			$.cookie('kfid', chooseid);
			$.cookie('kfimg', kfimg);
			kfid=chooseid;
				
				
		});
	
	}
	getkefulist();
	
	
	function initweixin(){
		
	
		if(headimg==''||headimg==undefined){
		
			$.post('/weixin/getCustinfo/',{"openid":openid},function(rs){
				headimg=rs.headimgurl;
				if(headimg!=''||headimg!=undefined){
					$.cookie('headimg', headimg);
				}
		
			},'json');
		}
	}
	
	initweixin();
	
	
	 
	
	$(document).ready(function(e) {
		initmsg();
		var ww=$(document).innerWidth();
		$('#context').width(ww-100);
		
		$('#dialog_list').css('height',$(document).innerHeight()-65);
		
	});
	function initmsg(){
		if(kfid==-1){
			return;
		}
		var url = '/chat/getmsg/';
		var aa={};
		aa.chatname=openid+";"+kfid;
		aa.maxid=maxmsgid;
		dopost(url,aa,function(rs){
			var index=0;
			$.each(rs,function(msgid,msg){
				if(parseInt(msgid)>maxmsgid){
					maxmsgid=parseInt(msgid);
				}
				if(msg.sender==openid){
					addleft(msg.content,msg.msgtype);
				}else{
					addright(msg.content,msg.msgtype);
				}
				index++;
			});
			if(index>0){
				var  innerHeight=$('#chatitemlist')[0].scrollHeight;
				$('#chatitemlist').animate({scrollTop: innerHeight}, 1000);
			 
				
			}
			setTimeout('initmsg()',3000);
		});
	}
	
	
			
			
	function textto(){
		if(kfid==-1){
			toast('当前没有客服在线');
			return;
		}
		var context =$('#context').val();
		if (context==''){
			toast('发送内容不能为空');
			return;
		}
		var url = '/chat/postmsg/';
		
		
		
		
		 

		var aa={};
		aa.chatname=openid+";"+kfid;
		aa.msgtype=1;
	
		aa.content=context;
		aa.sender=openid;
		aa.receiver=kfid;
		dopost(url,aa,function(rs){
			$('#context').val('');
			 
			
			
		});
		
		
		
		
	}
	function sendmsg(type,msg){
		var url = '/chat/postmsg/';
		
		
		
		
		 

		var aa={};
		aa.chatname=openid+";"+kfid;
		aa.msgtype=type;
	
		aa.content=msg;
		aa.sender=openid;
		aa.receiver=kfid;
		dopost(url,aa,function(rs){
			 $('#dialog_colse').click();
			 
			
			
		});
	}
	
	
	$('#sendit').click(function(e) {
		textto();
	});
	
	function addleft(content,type){
		var str="";
		var int_type=parseInt(type);
		switch (int_type){
			//文字
			case 1:
				str=content;
			break;
			//图片
			case 2:
				str='<img src="'+content+'" width="200px" height="auto"/>';
			break;
			case 3:
				
			break;
			case 4:
				str=getorderstr(content);
			break;
			case 5:
				str=getgoodstr(content);
			break;
			
			 
		}
		
		$('#chatitemlist').append('<div style="position:relative;margin:1em 1em;"><img src="'+headimg+'" width="40px" height="40px" style="border-radius:50px;position:absolute;left:5px;"/><img  src="/static/img/chatqipaoleft.png" style="position:absolute;left:49px;top:10px"/><div style="margin-left:60px;background-color:white;border-radius:10px;padding:0.5em 1em;word-break:break-all;min-height:40px">'+str+'</div>');
	}
	
	function addright(content,type){
		
		var str="";
		var int_type=parseInt(type);
		switch (int_type){
			//文字
			case 1:
				str=content;
			break;
			//图片
			case 2:
				str='<img src="'+content+'" width="200px" height="auto"/>';
			break;
			//满意度
			case 3:
			break;
			// 我的订单
			case 4:
			break;
			// 之前的商品
			case 5:
			break;
			 
		}
		$('#chatitemlist').append('<div style="position:relative;margin:1em 1em;"><img src="'+kfimg+'" width="40px" height="40px" style="border-radius:50px;position:absolute;right:5px;"/><img  src="/static/img/chatqipaoright.png" style="position:absolute;right:49px;top:10px"/><div style="margin-right:60px;background-color:white;border-radius:10px;padding:0.5em 1em;word-break:break-all;min-height:40px">'+str+'</div></div>');
	}
	
	
	
	$('#context').focusin(function(e) {
		
		$('#other_msg').slideUp(300);
		 
		$('#chatitemlist').animate({bottom:'50px'},300);
		var  innerHeight=$('#chatitemlist')[0].scrollHeight;
		$('#chatitemlist').animate({scrollTop: innerHeight}, 300);
	});
	$('#context').keydown(function(e) {
		var keycode = e.keyCode;
		if(keycode==13){
			textto();
		}
		 
	});
	$('#addthermsg').click(function(e) {
		$('#other_msg').slideDown(300);
		$('#chatitemlist').animate({bottom:'148px'},300);
		var  innerHeight=$('#chatitemlist')[0].scrollHeight;
		$('#chatitemlist').animate({scrollTop: innerHeight}, 300);
	});
	
	$('#dialog_colse').click(function(e) {
		$('#dialog_list').empty();
		$('#mydialog').hide();
		
	});
	 
	
	$('#myorders').click(function(e) {
		$('#mydialog').show();
		initorders();
	});
	
	function getorderstr(oid){
		var url="/webserver/api/v1/orderitem/?format=json&order="+oid;
		var str="";
		$.getJSON(url,function(rs){
			var object = rs.objects[0];
			
			var order = object.order;
			var time=order.modified;
			time=time.replace("T"," ");
			str="<div>订单号为:"+order.id+"<span style='float:right'>"+order.status+"</span>";
			str+="<div>"+time+"</div>";
			$.each(rs.objects,function(index,item){
				str+='<div id="'+item.goods.id+'" style="position:relative;background-color:#f4f4f4;margin-top:2px;"><div style="border: 1px solid #D6D6D6;width:80px;height:80px;background-image:url(\''+item.goods.image_thumb+'\');background-position:center;background-repeat:no-repeat;background-size:auto 70px;"></div><div style="position:absolute;left:90px;right:120px;display:block;height:80px;top:0px"><h4 style="margin-top:6px;font-weight:lighter;font-size:14px;">'+item.goods.name+'</h4><p class="my-dp1">'+item.good_format+'</p></div><div style="position:absolute;width:120px;right:0px;display:block;height:80px;top:0px"><p class="my-dp1 f-r" style="text-align:right;padding-top:3px;padding-right:3px">价格：<span style="color:#D12424">￥'+item.goods.price+'</span><br>×'+item.count+'</p></div></div>';
					 
					 
				 
					 
			});
			var cuxiaoid=order.deductionitemid;
			if(cuxiaoid!=null&&cuxiaoid!=0){
				var url="/webserver/api/v1/deduction/?format=json&id="+cuxiaoid;
				$.getJSON(url,function(rs){
					var object = rs.objects[0];
					 str+="<div>"+object.name+"</div>";
			
		
				},'json');
			}
			str+="<div>共"+order.count+"件商品,共"+order.act_price+"</div>";
				
				 
				
				 
				 
				 
				
		});
		return  str;
	}
	
	function getgoodstr(gooid){
		var url="/webserver/api/v1/good/?format=json&id="+gooid;
		var str="";
		$.getJSON(url,function(rs){
			var gd=rs.objects[0];
			str='<div id="'+gd.id+'" style="position:relative;background-color:#f4f4f4;margin-top:2px;" class="mygood"><div style="border: 1px solid #D6D6D6;width:80px;height:80px;background-image:url(\''+gd.image_thumb+'\');background-position:center;background-repeat:no-repeat;background-size:auto 70px;"></div><div style="position:absolute;left:90px;right:60px;display:block;height:80px;top:0px"><h4 style="margin-top:3px;font-weight:lighter">'+gd.name+'</h4><p class="my-dp1" style="font-size:12px"></p></div><div style="position:absolute;width:100px;right:0px;display:block;height:80px;top:0px"><p class="my-dp1 f-r" style="text-align:right;padding-top:3px;padding-right:3px"><span style="color:#D12424">￥'+gd.price+'</span></p></div></div>';
		});
		return str;
		
		
	}
	
	function initorders(){
		var url = "/webserver/api/v1/order/?format=json&open_id="+openid;
			$.getJSON(url, function(rs){
				var objects=rs.objects;
				$.each(objects,function(index,item){
					var time=item.create_at;
					time=time.replace("T"," ");
					var htm=item.status;
					 
					
					
				
					var ss='<div id="'+item.id+'" style="border-top:#ccc 1px solid" class="myordder"><div>'+time+'<span style="float:right">'+htm+'</span></div><div style="clear:both;"></div><div class="shangpinlist"></div><div class="youhui"></div><div >共<span style="color:#D12424">'+item.count+'</span>件商品合计：<span style="color:#D12424">￥'+item.act_price+'</span></div></div>';
					$('#dialog_list').append(ss);
					var cuxiaoid=item.deductionitemid;
					if(item.deductionitemid!=null&&item.deductionitemid!=0){
						initayouhui(item.id,item.deductionitemid);
					}
					
					initAorder(item.id,item.status);
					
					
					 
					 
				
				});
				$('.myordder').click(function(e) {
					var id = $(this).attr('id');
					fasongdingdan(id);
				});
			});
				 
	}
	
	
	function initAorder(oid,ispj){
			var url = '/webserver/api/v1/orderitem/?format=json&order='+oid;
			$.getJSON(url,function(rs){
				var objects=rs.objects;
				$.each(objects,function(index,item){
					var htm='';
					if(ispj=='确认收货'){
						htm= ispingjia(oid,item.goods.id);
					}
					$('#dialog_list #'+oid).find('.shangpinlist').append('<div id="'+item.goods.id+'" style="position:relative;background-color:#f4f4f4;margin-top:2px;"><div style="border: 1px solid #D6D6D6;width:80px;height:80px;background-image:url(\''+item.goods.image_thumb+'\');background-position:center;background-repeat:no-repeat;background-size:auto 70px;"></div><div style="position:absolute;left:90px;right:60px;display:block;height:80px;top:0px"><h4 style="margin-top:3px;font-weight:lighter">'+item.goods.name+'</h4><p class="my-dp1" style="font-size:12px">'+item.good_format+'</p></div><div style="position:absolute;width:100px;right:0px;display:block;height:80px;top:0px"><p class="my-dp1 f-r" style="text-align:right;padding-top:3px;padding-right:3px"><span style="color:#D12424">￥'+item.goods.price+'</span><br>×'+item.count+'</p></div><div style="position:absolute;right:0px;bottom:0px;text-align:right">'+htm+'</div></div>');
				 
					/*
					.append('<dl class="my-dl1" style="background-color:#f4f4f4;margin-top:2px"><div style=""></div><dt><a href="#"><img src="'+item.goods.image_thumb+'"></a></dt><dd style="width:50%"></dd><div style="clear:both;"></div></dl>');
					*/
					
					 
				});
			});
		
		}
		
		function initayouhui(orderid,deduid){
			var url="/webserver/api/v1/deduction/?format=json&id="+deduid;
			$.getJSON(url,function(rs){
				var object = rs.objects[0];
				$('#dialog_list #'+orderid).find('.youhui').html(object.name);
				
			
			},'json');
		}
		
		function fasongdingdan(id){
			sendmsg(4,id);
		
		}
		
		function initgoods(){
			$.each(shangpinhistory,function(index,item){
				var str = getgoodstr(item);
				$('#dialog_list').append(str);
				
			});	
			$('#dialog_list').find('.mygood').click(function(e) {
				var id =$(this).attr('id');
				sendmsg(5,id);
			});
		}
	
	
	
	$('#zuijinggoods').click(function(e) {
		initgoods();
		$('#mydialog').show();
		
	});
	 


</script>
</body>
</html>
